<template>
  <div>
    <ActivityForm @search="search" :is-loading="loadingData" :isExporting="state.exportLoading" @export="myExport"/>
    <div class="showtable">
      <el-table border style="width: 100%;" :data="tableData" v-loading="loadingData" size="small">
        <el-table-column v-for="(item, index) in theader" :width="item.width || ''" :key="index" :align="item.align || ''"
          :label="item.label" :prop="item.prop">
          <template #default="scope" v-if="item.prop == 'activity'">
            <p>活动：{{ scope.row.activity_no }}</p>
            <p v-show="scope.row.rec_activity_no != ''">REC活动：{{ scope.row.rec_activity_no }}</p>
            <p>类型：{{ scope.row.type_label }}</p>
          </template>
          <template #default="scope" v-if="item.prop == 'order'">
            <p>订单编号：{{ scope.row.order.order_no }}</p>
            <p>创建时间：{{ scope.row.order.create_time }}</p>
            <p>支付时间：{{ scope.row.order.pay_time }}</p>
          </template>
          <template #default="scope" v-if="item.prop == 'merchant'">
            <p>ID：{{ scope.row.client.client_no }}</p>
            <p>名称：{{ scope.row.client.client_name }}</p>
          </template>
          <template #default="scope" v-if="item.prop == 'device'">
            <p>设备：{{ scope.row.device.sticker_num }}</p>
            <p>主板：{{ scope.row.device.motherboard_num }}</p>
          </template>
          <template #default="scope" v-if="item.prop == 'user'">
            <p>ID：{{ scope.row.user.user_id }}</p>
            <p>账户：{{ scope.row.user.card_number }}</p>
            <p>邮箱：{{ scope.row.user.user_email }}</p>
          </template>
          <template #default="scope" v-if="item.prop == 'handle'">
            <el-button type="primary" size="small" @click.stop="toDetails(scope.row.activity_no)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page flexCenter">
      <el-pagination background layout="prev, pager, next, jumper, total" @current-change="pageChange" @prev-click="pageChange"
        @next-click="pageChange" :total="state.count" :page-size="state.searchLimit.limit" />
    </div>
    <!-- 详情 -->
    <ActivityDetail ref="activityDetailRef" />
  </div>
</template>
<script setup>
import ActivityForm from './components/ActivityForm.vue';
import ActivityDetail from './components/ActivityDetail.vue';
import { ref, reactive, onBeforeMount } from 'vue';
import { activityList, activityDetail } from '@/api/activityManage/activityManage';
import { exportExcel } from '@/utils/exportExcel';
import { ElMessage } from 'element-plus';
const activityDetailRef = ref(null);
const theader = ref([
  { prop: 'activity', label: '活动' },
  { prop: 'order', label: '订单', },
  { prop: 'merchant', label: '商家信息', },
  { prop: 'device', label: '设备信息', width: '120px' },
  { prop: 'user', label: '用户信息' },
  { prop: 'status_label', label: '活动状态', width: '100px', align: 'center' },
  { prop: 'create_time', label: '创建时间', align: 'center', width: '170px' },
  { prop: 'handle', label: '操作', width: '80px', align: 'center' },
])
const loadingData = ref(false);
const btnLoading = ref(false);
const tableData = ref([])
const current_activity_id = ref('');
const state = reactive({
  form: {},
  searchLimit: {
    page: 1,
    limit: 10
  },
  count: 0,
  exportLoading: false,
  exportLimit: {
    page: 1,
    limit:200,
    pageCount:1
  }
})
// methods

const search = async (form) => {
  btnLoading.value = true;
  state.form = form
  getList()
}

const getList = async () => {
  loadingData.value = true;
  const res = await activityList({ ...state.searchLimit, ...state.form })
  if (res.code === 1000) {
    tableData.value = res.data.listData.list
    state.count = res.data.listData.count
  }
  btnLoading.value = false;
  loadingData.value = false;
}

const toDetails = async (activity_no) => {
  if(current_activity_id.value==activity_no){
    return activityDetailRef.value.dialogVisible = true;
  }
  current_activity_id.value = activity_no;
  const res = await activityDetail(activity_no);
  if (res.code === 1000) {
    activityDetailRef.value.detailsData = res.data;
    activityDetailRef.value.dialogVisible = true;
  }
}

const pageChange = (page) => {
  state.searchLimit.page = page
  getList()
}

// 导出
let excelData = [];
const myExport = async () => {
  state.exportLoading = true;
  const res = await activityList({ ...state.searchLimit, ...state.form ,...state.exportLimit});
  let exportData = [];
  let fileName = '活动列表';
  if (res.code === 1000) {
    // fileName += state.exportLimit.page;
    exportData = res.data.listData.list;
    state.exportLimit.pageCount = res.data.listData.pageCount;
  }else{
    ElMessage.error(res.message);
    state.exportLoading = false;
    return exportData = [];
  }
  const propList = [
    { prop: 'activity_no', label: '活动编号' },
    { prop: 'order.order_no', label: '订单编号' },
    { prop: 'client_no', label: '商家ID' },
    { prop: 'client.client_name', label: '商家名称' },
    { prop: 'device.sticker_num', label: '设备编号' },
    { prop: 'device.motherboard_num', label: '主板编号' },
    { prop: 'user.user_id', label: '用户ID' },
    { prop: 'user.card_number', label: '用户银行账户' },
    { prop: 'user.user_email', label: '用户邮箱' },
    { prop: 'type_label', label: '类型' },
    { prop: 'status_label', label: '状态' },
    { prop: 'order.price', label: '订单金额' },
    { prop: 'create_time', label: '活动创建时间' },
    { prop: 'order.create_time', label: '订单创建时间' },
    { prop: 'order.pay_time', label: '订单支付时间' },
  ]
  if(!excelData[0]){
    excelData[0] = propList.map(item => item.label);
  }
  for(let i = 0; i < exportData.length; i++){
    excelData.push(propList.map(item => {
      if(item.prop.indexOf('.') > -1){
        return exportData[i][item.prop.split('.')[0]]?.[item.prop.split('.')[1]]||'';
      }
      return exportData[i][item.prop]
    }))
  }
 
  if(state.exportLimit.page<state.exportLimit.pageCount){
    state.exportLimit.page++
    myExport();
  }else{
    state.exportLoading = false;
    state.exportLimit.page = 1;
    state.exportLimit.pageCount = 1;
    exportExcel(excelData,'sheet1',`${fileName}.xlsx`);
    excelData = [];
    // ElMessage.success('导出完成');
  }
}

// life cycle
onBeforeMount(() => {
  getList()
})

</script>
<style lang="less" scoped>
.showtable {
  margin: 0 20px;
}

.page {
  margin: 20px;
}
</style>